<template>
  <view class="detail-view">
    <u-form label-width="150" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="退款单位">
          <u-input
            @click="goPage('/pagesT/customer/selCustomer')"
            disabled
            class="dis-input"
            v-model="add_form.unitName"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item label="单据日期">
          <picker mode="date" @change="bindDateChange">
            <view
              style="
                width: 524rpx;
                text-align: right;
                display: inline-block;
                margin-right: 10rpx;
              "
            >
              <text v-if="add_form.refundTime">{{
                $u.timeFormat(add_form.refundTime, "yyyy-mm-dd")
              }}</text>
              <text style="color: #b8c0c8" v-else>请选择</text>
            </view>
            <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
          </picker>
        </u-form-item>
        <u-form-item required label="所属店铺">
          <u-input
            @click="goPage('/pagesT/shop/selShop')"
            disabled
            class="dis-input"
            v-model="add_form.shopName"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="退款单明细">
          <view class="form-value add-btn-go" @click="addAccount">
            <u-icon name="plus" size="24" color="#fb5904"></u-icon>
            <text class="form-value add-text">新增</text>
          </view>
        </u-form-item>
        <view class="detail-ul">
          <view
            class="detail-li"
            v-for="(item, index) in add_form.accountList"
            :key="index"
          >
            <view class="del-icon" @click="delAccount(index)"
              ><u-icon
                name="minus-circle-fill"
                size="40"
                color="#fb5904"
              ></u-icon
            ></view>
            <u-form-item label="结算账户">
              <view class="in-form-item">
                <u-input
                  @click="settlementAccount(index)"
                  disabled
                  v-model="item.accountName"
                  placeholder="请选择"
                />
                <view class="icon-arrow-right"
                  ><u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon
                ></view>
              </view>
            </u-form-item>
            <u-form-item label="退款金额"
              ><input
                placeholder-style="color:#B8C0C8"
                type="digit"
                v-model="item.money"
                placeholder="请输入退款金额"
            /></u-form-item>
            <view class="bottom clearfix"
              ><input
                placeholder-style="color:#B8C0C8"
                type="text"
                v-model="item.remark"
                placeholder="说点什么吧"
            /></view>
          </view>
        </view>
      </view>
    </u-form>
    <view class="detail-bottom"
      ><u-button
        class="handel-btn"
        @click="submit"
        :loading="sub_load"
        :ripple="true"
        type="primary"
        >提交</u-button
      ></view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      sub_load: false,
      add_form: {
        unitId: "",
        unitName: "",
        sourceNo: "",
        sourceNoMoney: "",
        currentAccountName: "",
        financeType: "销售退款",
        financeTypeId: 12,
        shopId: "",
        money: "",
        shopName: "",
        refundTime: "",
        createTime: "",
        accountList: [
          {
            accountId: "",
            accountNumber: "",
            accountName: "",
            money: "",
            discountMoney: "",
            finalMoney: "",
            payWay: "",
            remark: "",
          },
        ],
      },
      methods_show: false,
      account_index: 0,
      customerData: "",
      account_id: "",
      shopData: "",
      AccountData: "",
      tag: "",
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  watch: {
    customerData(val) {
      if (val) {
        console.log(val);
        this.add_form.unitId = val.id;
        this.add_form.unitName = val.name;
        this.add_form.money = val.money;
        this.add_form.type = val.type;
      }
    },
    // 店铺
    shopData(val) {
      if (val) {
        this.add_form.shopName = val.name;
        this.add_form.shopId = val.id;
      }
    },
    AccountData(val) {
      if (val) {
        this.add_form.accountList[this.account_index].accountId = val.id;
        this.add_form.accountList[this.account_index].accountName = val.name;
        this.add_form.accountList[this.account_index].accountNumber =
          val.accountNumber;
      }
    },
  },
  onLoad(options) {
    this.add_form.refundTime = parseInt(new Date().getTime() / 1000);
  },
  methods: {
    change(e) {
      this.refundTime = new Date().getTime();
    },
    addAccount() {
      this.add_form.receiptOffsetData.push({
        collectionAmount: "",
        preferentialAmount: "",
        actualAmount: "",
        settlementMethod: "",
        remark: "",
      });
    },
    delAccount(index) {
      if (this.add_form.accountList.length === 1) {
        this.$u.toast("至少保留一条");
        return;
      }
      this.add_form.accountList.splice(index, 1);
    },
    //  添加
    submit() {
      if (!this.add_form.unitName) {
        this.$u.toast("请选择退款单位");
        return;
      }
      if (!this.add_form.shopId) {
        this.$u.toast("请选择所属店铺");
        return;
      }
      let isSub = true;
      for (let i in this.add_form.accountList) {
        let item = this.add_form.accountList[i];
        if (!item.accountName) {
          isSub = false;
          this.$u.toast("请选择结算账户");
          break;
        }
        if (!item.money) {
          isSub = false;
          this.$u.toast("请输入退款金额");
          break;
        }
      }
      if (!isSub) {
        return;
      }
      this.sub_load = true;
      this.$u.api
        .addRefund({
          ...this.add_form,
          currentAccountName: this.userInfo.name || "",
        })
        .then((res) => {
          this.sub_load = false;
          this.$u.toast("新增成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        })
        .catch((err) => {
          this.sub_load = false;
        });
    },
    settlementAccount(index) {
      if (!this.add_form.shopId) {
        this.$u.toast("请先选择商铺");
        return;
      }
      this.goPage("/pagesT/account/selAccount?shopId=" + this.add_form.shopId);
      this.account_index = index;
    },
    bindDateChange(e) {
      this.add_form.refundTime = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-ul {
  .detail-li {
    padding-left: 60rpx;
    position: relative;
    border-bottom: 1px solid #eeeeee;

    &:last-child {
      border-bottom: 0 none;
    }

    .del-icon {
      position: absolute;
      top: 36%;
      left: 0;
      transform: translateY(-50%);
    }

    .title {
      line-height: 80rpx;
    }

    .money-ul {
      border-top: 1px solid #eeeeee;
      padding: 20rpx 0;
      display: flex;

      .money-li {
        flex: 3;
        border-right: 1px solid #eeeeee;

        input {
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
        }

        &:last-child {
          border-right: 0 none;
        }
      }
    }

    .bottom {
      // border-top: 1px solid #eeeeee;

      input {
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }
}
.in-form-item {
  position: relative;
  padding-right: 30rpx;
  .icon-arrow-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.form-value {
  .add-text {
    color: #fb5904;
  }
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
